<template>
   <div class="sreachBox">
      <p>
          <span>输入搜索</span>
        <el-input
          placeholder="请输入微信昵称"
          v-model="name"
          clearable
        >
        </el-input>
      </p>
      <div class="block">
        <span class="demonstration">上次消费时间：</span>
        <el-date-picker
          v-model="value1"
          align="right"
          type="date"
          placeholder="开始日期"
          :picker-options="pickerOptions"
        >
        </el-date-picker
        >
        ---
        <el-date-picker
          v-model="value2"
          align="right"
          type="date"
          placeholder="结束日期"
          :picker-options="pickerOptions"
        >
        </el-date-picker>
        <el-button type="primary" @click="searchFun">查询</el-button>
        <el-button type="primary">重置</el-button>
      </div>
    </div>

</template>

<script>
export default {
    data() {
        return {
        name:"",
        pickerOptions: {
            disabledDate(time) {
            return time.getTime() > Date.now();
            },
            shortcuts: [
            {
                text: "今天",
                onClick(picker) {
                picker.$emit("pick", new Date());
                },
            },
            {
                text: "昨天",
                onClick(picker) {
                const date = new Date();
                date.setTime(date.getTime() - 3600 * 1000 * 24);
                picker.$emit("pick", date);
                },
            },
            {
                text: "一周前",
                onClick(picker) {
                const date = new Date();
                date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
                picker.$emit("pick", date);
                },
            },
            ],
        },
        value1: "",
        value2: "",
        };
  },
  methods:{
   
    searchFun(){
      this.$emit('parentseachFun',this.name )
    },
   
  }

}
</script>

<style scoped>
.sreachBox {
    height: 100px;
    box-sizing: border-box;
    display: flex;
    padding: 26px 0 30px 30px;
    /* background-color: pink; */
}
.sreachBox p{
     width: 300px;
     height: 100%;
     display: flex;
     font-weight: 700;
}
.sreachBox p span{
     width: 100px;
     display: inline-block;
     margin-top: 5px;
}
.sreachBox .block{
     margin-left: 30px;
}
.block span{
    font-weight: 700;
}
.block .el-input--prefix{
     width: 150px;
}
.sreachBox .el-button{
    margin-left: 30px;
    font-weight: 700;
}


</style>